import React from "react";
import "./index.css";
class Number extends React.Component {
    state = {
        cls: 'line'
    }
    onDanClick = (list) => {
        list.map((item, index) => {
            const isEven = !!(index % 2);
            if (isEven) {
                this.onDan();
                console.log(this.state.cls)

            } else {
                this.onShuang();
                console.log(this.state.cls)
            }
        })
    }
    onDan = () => {
        console.log("dan")
        this.setState({ cls: "line even" })
    }
    onShuang = () => {
        console.log("shuang")
        this.setState({ cls: "line" })
    }
    onDelClick = () => {
        this.setState({ cls: `line` })
    }
    render() {
        const list = [2, 4, 6, 8, 10];
        const { cls } = this.state;
        return (
            <div>
                <button onClick={() => this.onDanClick(list)}>奇数行加深</button>
                <button onClick={() => this.onDelClick()}>正常显示</button>
                {list.map((item, index) => {
                    return <p key={item} className={cls}>{item}</p>
                })}
            </div>
        )
    }
}
export default Number;